<template>
	<!-- 彩票订单详情 -->
	<view v-if="order_info!=null">
		<view class="header">
			<view class="name flex">
				<text>{{order_info.order_name}}</text>
				<text class="lssueNumber" v-if="order_info.bet_type == 2 || order_info.bet_type == 3 || order_info.bet_type == 4">第{{order_info.issue_num}}期</text>
			</view>
			<view class="status flex-ac">
				<view class="flex-col-ac">
					<text style="font-size: 36rpx;color: #F22F29;" v-if="Number(order_info.value)">{{order_info.value}}</text>
					<text style="font-size: 36rpx;color: #666;" v-else>——</text>
					<text>中奖金额(元)</text>
				</view>
				<view class="flex-col-ac">
					<text style="font-size: 30rpx;">{{order_info.status_name}}</text>
					<text>订单状态</text>
				</view>
				<view class="flex-col-ac">
					<text style="font-size: 36rpx;color: #F22F29;">{{order_info.total_price}}</text>
					<text>投注金额(元)</text>
				</view>
			</view>
		</view>
		<view class="drawPrize" v-if="order_info.bet_type == 2 && order_info.lottery_red.length">
			<view class="text">开奖号码</view>
			<view class="numberBox">
				<view v-for="(win,widx) in order_info.lottery_red">{{win}}</view>
				<view class="hit_blue" v-for="(win1,widx1) in order_info.lottery_blue">{{win1}}</view>
			</view>
		</view>
		<view class="drawPrize" v-if="order_info.bet_type == 3 && order_info.lottery_blue.length">
			<view class="text">开奖号码</view>
			<view class="numberBox">
				<view v-for="(win,widx) in order_info.lottery_blue">{{win}}</view>
				<view class="hit_blue" v-for="(win1,widx1) in order_info.lottery_yellow">{{win1}}</view>
			</view>
		</view>
		<view class="drawPrize" v-if="order_info.bet_type == 4 && order_info.lottery_res.length">
			<view class="text">开奖号码</view>
			<view class="numberBox">
				<view v-for="(win,widx) in order_info.lottery_res">{{win}}</view>
				<!-- <view class="hit_blue" v-for="(win1,widx1) in order_info.lottery_yellow">{{win1}}</view> -->
			</view>
		</view>
		<view class="betsInfo">
			<view class="infoHead flex-bc">
				<view>投注信息</view>
				<view class="note">
					<text v-if="order_info.strand_name">{{order_info.strand_name}}</text>
					<text v-if="order_info.total_note">{{order_info.total_note}}注</text>
					<text v-if="order_info.multiple">{{order_info.multiple}}倍</text>
				</view>
			</view>
			<view class="infoBot" v-if="order_info.bet_type == 1">
				<view class="tabTop flex-c">
					<text style="flex:2">场次</text>
					<text style="flex:3">主队VS客队</text>
					<text style="flex:3">投注内容</text>
					<text style="flex:2">赛果</text>
				</view>
				<view class="tabList">
					<view class="tabItem flex-c" v-for="(item,index) in order_info.match_data" :key="index">
						<view class="flex-c col" style="flex:2">
							<view class="inner flex-col-ac text-gray">
								<text>{{item.week_day}} {{item.match_code}}</text>
								<text>{{item.match_type}}</text>
								<text>{{item.bet_end_time}}截止</text>
							</view>
						</view>
						<view class="flex-c col" style="flex:3">
							<view class="inner flex-col-ac">
								<text>{{item.home_name}}<text v-if="item.handicap>0" class="text-red">({{item.handicap}})</text><text v-if="item.handicap<0"
									 class="text-green">({{item.handicap}})</text></text>
								<text class="text-gray" v-if="!item.score">vs</text>
								<text class="text-red" v-if="item.score">{{item.score}}</text>
								<text>{{item.away_name}}</text>
							</view>
						</view>
						<view class="flex-c col" style="flex:3;flex-direction: column;">
							<view class="inner flex-col-ac" :class="item1.hit?'text-red':''" v-for="(item1,index1) in item.bet_data" :key="index1">
								<view>
									<view>{{item1.bet_type_name}}</view>
									<!-- <view class="text-gray">(3:2)</view> -->
								</view>
								<view>
									<view>({{item1.value}})</view>
									<!-- <view class="text-gray">(3:2)</view> -->
								</view>
								<!-- <view>
									<view>胜-胜</view>
									<view class="text-gray">(3:2)</view>
								</view> -->
							</view>
						</view>
						<view class="flex-c col" style="flex:2">
							<view class="inner flex-col-ac">
								<text v-for="(item1,index1) in item.bet_data" :key="index1">{{item1.hit_type_name}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="warm">
					赔率以实际出票为准
				</view>
			</view>
			<view class="infoBot" v-if="order_info.bet_type == 2">
				<view class="infoItem flex" v-for="(itemBall,indexBall) in order_info.bet_data" :key="indexBall">
					<view class="text">{{itemBall.type_name}}</view>
					<view class="numberBox flex">
						<view class="wrap flex-c" v-for="(numberDan,dan) in itemBall.red_guts" :key="dan">
							<view class="numberItem" :class="numberDan.hit_status?'hit_red':''">{{numberDan.number}}</view>
							<text style="color: #F22F29;margin-left: 10rpx;" v-if="dan == itemBall.red_guts.length-1">#</text>
						</view>
						<view class="wrap" v-for="(number,n) in itemBall.red_ball" :key="'r'+n">
							<view class="numberItem" :class="number.hit_status?'hit_red':''">{{number.number}}</view>
						</view>
						<view class="wrap" v-for="(number1,n1) in itemBall.blue_ball" :key="'b'+n1">
							<view class="blueBall numberItem" :class="number1.hit_status?'hit_blue':''">{{number1.number}}</view>
						</view>

					</view>
				</view>
			</view>

			<view class="infoBot" v-if="order_info.bet_type == 3">
				<view class="infoItem flex" v-for="(itemBall,indexBall) in order_info.bet_data" :key="indexBall">
					<view class="text">{{itemBall.type_name}}</view>
					<view class="numberBox flex">
						<view class="wrap flex-c" v-for="(numberDan,dan) in itemBall.blue_guts" :key="dan">
							<view class="numberItem" :class="numberDan.hit_status?'hit_red':''">{{numberDan.number}}</view>
							<text style="color: #F22F29;margin-left: 10rpx;" v-if="dan == itemBall.blue_guts.length-1">#</text>
						</view>
						<view class="wrap" v-for="(number,n) in itemBall.blue_ball" :key="'b'+n">
							<view class="numberItem" :class="number.hit_status?'hit_red':''">{{number.number}}</view>
						</view>
						<view class="wrap flex-c" v-for="(numberDan,dan) in itemBall.yellow_guts" :key="dan">
							<view class="numberItem blueBall" :class="numberDan.hit_status?'hit_blue':''">{{numberDan.number}}</view>
							<text style="color: #5CA1FC;margin-left: 10rpx;" v-if="dan == itemBall.yellow_guts.length-1">#</text>
						</view>
						<view class="wrap" v-for="(number1,n1) in itemBall.yellow_ball" :key="n1">
							<view class="numberItem blueBall" :class="number1.hit_status?'hit_blue':''">{{number1.number}}</view>
						</view>


					</view>
				</view>
			</view>

			<view class="infoBot" v-if="order_info.bet_type == 4">
				<view class="infoItem flex" v-for="(itemBall,indexBall) in order_info.bet_data">
					<view class="text">{{itemBall.name}}</view>
					<view class="numberBox3d">
						<view    v-if="itemBall.type==1"   class="flex box3d" v-for="(number,n) in itemBall.number" :key="n">
							<text v-if="n == 0">百位</text><text v-if="n == 1">十位</text><text v-if="n == 2">个位</text>
							<view class="num3d" v-for="(number1,n1) in number" :key="n1">{{number1}}</view>
						</view>
						<view  v-if="itemBall.type!=1" class="flex box3d" >
							<view class="num3d"   v-for="(number,n) in itemBall.number"  >{{number}}</view>
						</view> 
					</view>
				</view>
			</view>
		</view>
		<view class="orderDetail">
			<view class="orderHead">
				<text>订单详情</text>
			</view>
			<view class="orderInfo">
				<view class="flex" v-if="order_info.order_sn">订单编号：<text>{{order_info.order_sn}}</text></view>
				<view class="flex" v-if="order_info.create_time">下单时间：<text>{{order_info.create_time}}</text></view>
				<view class="flex" v-if="order_info.get_time">取票时间：<text>{{order_info.get_time}}</text></view>
				<view class="flex" v-if="order_info.give_time">出票时间：<text>{{order_info.give_time}}</text></view>
				<view class="flex" v-if="order_info.back_time">撤单时间：<text>{{order_info.back_time}}</text></view>
				<view class="flex-c" v-if="order_info.thumb">
					<image :src="order_info.thumb" style="width: 100%;margin-top: 20rpx;" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="holder">

		</view>
		<view class="footer flex-c">
			<view class="contact flex-c" @click="fnCall()">
				<image src="../../../static/order/contact.png"></image>
				<text>联系店主</text>
			</view>
			<view class="copyOrder flex-c" v-if="order_info.bet_type != 1">
				<text>复制投注</text>
			</view>
			<view class="buy flex-c" @click="fnToBet()">
				<text>重新投注</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				token: uni.getStorageSync('token'),
				store_id: 1,
				order_info: null,
				mobile: uni.getStorageSync('mobile')
			};
		},
		onLoad(option) { //页面传参
			// this.fnGetData(option.data)
			console.log(option)
			this.order_id = option.order_id
			this.fnGetOrderDetail()
		},
		methods: {
			fnGetOrderDetail() {
				uni.showToast({
					title: '加载中',
					icon: 'loading'
				})
				console.log(this.store_id)
				console.log(this.token)
				console.log(this.order_id)
				this.request({
					url: '/czb/football_bet/getOrderDetails',
					method: 'POST',
					data: {
						'store_id': this.store_id,
						'token': this.token,
						'order_id': this.order_id
					},
				}).then((ret) => {
					console.log("订单详情")
					console.log(ret);
					if (ret.code == 0) {
						uni.hideToast()
						this.order_info = ret.data
					}
				})
			},
			fnToBet() {
				uni.navigateTo({
					url: `/pages/caipiaoDetail/caipiaoDetail?type_id=${this.order_info.bet_type}`
				})
			},
			fnCall() {
				console.log(this.mobile)
				if (this.mobile) {
					uni.makePhoneCall({
						phoneNumber: this.mobile,
						success: (res) => {
							console.log(res)
						},
						fail: (e) => {
							console.log(e)
						}
					});
				} else {
					uni.showToast({
						title: '暂无联系方式',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		.name {
			height: 100rpx;
			background: #fff;
			align-items: center;
			font-size: 36rpx;
			padding: 0 20rpx;
			margin-bottom: 1rpx;

			.lssueNumber {
				font-size: 26rpx;
				color: #999;
				margin-left: 20rpx;
				padding: 0 20rpx;
				border-left: 1rpx solid #999;
			}
		}

		.status {
			height: 128rpx;
			background: #fff;
			font-size: 24rpx;
			color: #666;

			view {
				flex: 1;
			}
		}
	}

	.drawPrize {
		overflow: hidden;
		padding: 20rpx 20rpx 10rpx;
		background: #fff;
		margin: 10rpx 0;
		font-size: 28rpx;
		position: relative;

		.text {
			color: #666;
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.numberBox {
			float: right;
			margin-left: 30rpx;
			width: 80%;

			view {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #F22F29;
				margin-left: 8rpx;
				line-height: 48rpx;
				text-align: center;
				color: #fff;
				float: left;
				margin-bottom: 10rpx;
			}

			.hit_blue {
				background: #5CA1FC;
				color: #fff;
				border: none;
			}
		}
	}

	.betsInfo {
		padding: 0 20rpx;
		background: #fff;
		margin-top: 10rpx;

		.infoHead {
			height: 74rpx;
			font-size: 28rpx;
			color: #666;
			border-bottom: 1rpx solid #F3F3F3;

			.note {
				text {
					margin: 0 10rpx;
				}
			}

		}

		.infoBot {
			overflow: hidden;
			position: relative;
			font-size: 28rpx;
			padding: 20rpx 0rpx 10rpx;

			.infoItem {
				align-items: center;
				padding: 10rpx 0;
                .text{
					// width: 20%;
				}
				.numberBox3d {
					float: right;
					margin-left: 30rpx;
					width: 80%;
					.box3d {
						padding: 10rpx;
						align-items: center;

						text {
							color: #999;
							margin-right: 8rpx;
							font-size: 24rpx;
						}

						.num3d {
							width: 44rpx;
							height: 44rpx;
							border-radius: 50%;
							background: #F22F29;
							margin-left: 5rpx;
							line-height: 46rpx;
							text-align: center;
							color: #fff;
							float: left;

						}
					}
				}

			}

			.tabTop {
				text {
					text-align: center;
					border: 1rpx solid #E3E3E3;
					padding: 10rpx 0;
					background: #F3F3F3;
					color: #999;
					font-size: 28rpx;
				}
			}

			.tabList {
				margin-bottom: 20rpx;

				.tabItem {
					.text-gray {
						color: #666;
					}

					.text-red {
						color: #F22F29;
					}

					.text-green {
						color: #22C538;
					}

					align-items:stretch;

					.col {
						border: 1rpx solid #E3E3E3;
						padding: 20rpx 0;
						font-size: 26rpx;
						color: #333;
					}
				}
			}

			.warm {
				text-align: center;
				font-size: 24rpx;
				margin-bottom: 10rpx;
			}

			.text {
				color: #666;
				white-space: nowrap;
			}

			.numberBox {
				float: right;
				margin-left: 30rpx;
				width: 90%;

				.numberItem {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background: #FEEAE9;
					margin-left: 8rpx;
					line-height: 48rpx;
					text-align: center;
					color: #F22F29;
					float: left;
					// margin-bottom: 10rpx;
					border: 1rpx solid #F22F29;
					box-sizing: border-box;
				}

				.blueBall {
					border-color: #7EB5FC;
					color: #5CA1FC;
					background: #FAFDFF;
				}

				.hit_red {
					background: #F22F29;
					color: #fff;
					border: none;
				}

				.hit_blue {
					background: #5CA1FC;
					color: #fff;
					border: none;
				}

			}
		}
	}

	.orderDetail {
		padding: 0 20rpx;
		background: #fff;
		margin: 8rpx 0;
		font-size: 24rpx;
		color: #666;

		.orderHead {
			font-size: 30rpx;
			color: #333;
			border-bottom: 1rpx solid #F3F3F3;
			height: 74rpx;
			line-height: 74rpx;
			box-sizing: border-box;
		}

		.orderInfo {
			padding: 10rpx 0;

			view {
				margin: 10rpx 0;
				align-items: center;
			}
		}
	}

	.holder {
		height: 100rpx;
	}

	.footer {
		height: 100rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		color: #fff;

		view {
			flex: 1;
			height: 100%;
		}

		.contact {
			color: #333;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}

		.copyOrder {
			background: #FFA40F;
		}

		.buy {
			background: #F22F29;
		}
	}
</style>
